<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>韭菜财经</title>
		<script src="../js/vue.js"></script>
		<script src="jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.newszhuti{
				min-width: 500px;
				max-width: 600px;
				border: #0000FF solid 1px;
				float: left;
				margin-left: 30px;
			}
			.newszhuti ul{
				list-style: none;
			}
			.newszhuti ul li{
				width: 500px;
				float: left;

			}
			.newszhuti ul li img{
				width: 50px;
				height: 50px;
				float: left;
			}

		</style>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="resultdata()">载入数据</button>
			<div class="newszhuti">
				<p>最新新闻</p>
				<ul>
					<li v-for="v in db" :key="v.id">
						<img :src="v.pic" >
						<div style="display: flex;flex-direction: column;">
							<p>{{v.title}}</p>
							<p>{{v.keywords}}</p>
							<p><button type="button" @click="scwz(v)">收藏/取消</button></p>
						</div>
					</li>
				</ul>
			</div>
			<div class="newszhuti">
				<p>收藏新闻</p>
				<ul>
					<li v-for="v in sc" :key="v.id">
						<img :src="v.pic" >
						<div style="display: flex;flex-direction: column;">
							<p>{{v.title}}</p>
							<p>{{v.keywords}}</p>
							<p><button type="button" @click="scwz(v)">收藏/取消</button></p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					db:'',
					sc:[]
				},
				methods:{
					resultdata(){
						$.ajax({
							type: "POST",
							url: "https://api.it120.cc/liujiahe/cms/news/list/v2",
							dataType: "json",
							success: (data)=> { //这里需要用箭头函数，不然data将无法传入
								this.db=data.data.result;
							}
						});
					},
					scwz(old){
						let req = this.sc.some((v,i)=>{
							return v.id===old.id  //利用some数组方法判断sc数组中是否已经存在，return结果到req中
						})
						if(req){  //根据req结果来做出操作
									//已经存在 利用filter过滤 并存放到数组里
							this.sc=this.sc.filter(v=>{
								return v.id!==old.id
							})
						}else{
							this.sc.push(old) // 不存在 直接push压入数组里
						}
					}
				}
			})
		</script>
		
		<script type="text/javascript">
			
		</script>
	</body>
</html>
